//this is the route channel  differ to the home's children components channel
// they are have same name 
import React, { useEffect, useState } from 'react'
import axios from '../services'
import { Tabs } from 'react-vant'
import '../css/ChannelList.css'
export default function Channel(props) {
  let urlObj = new URLSearchParams(props.location.search).get('id')
  const [list, setList] = useState({})
  const [data, setData] = useState([])
  function getList(list) {
    axios.get('/goods/list', {
      params: {
        page: 1,
        size: 1000,
        categoryId: list
      }
    }).then(res => {
      setData(res.data.data)
    })
  }
  useEffect(() => {
    axios.get('/goods/category?id=' + urlObj).then(res => {
      setList(res.data)
      getList(urlObj)
    })
  }, [])
  return (
    JSON.stringify(list) === '{}' ? null : <div className='demo-tabs'>
      <Tabs
      defaultActive={urlObj-0}
      className='channelList' onChange={(e) => { getList(e) }}>
        {list.brotherCategory.map(item => (
          <Tabs.TabPane name={item.id} key={item.id} title={item.name} >
            <h1>{item.name}</h1>
            <h2>{item.front_desc}</h2>
          </Tabs.TabPane>
        ))}
        <ul>
          
          {
            data.map(item=><li key={item.id}
            onClick={()=>{
              console.log(item.id)
            }}
            >
              <img loading='lazy' src={item.list_pic_url} alt="" />
              <p>{item.name}</p>
              <span>￥{item.retail_price.toFixed(2)}元</span>
            </li>)
          }
        </ul>
      </Tabs>
    </div>
  )
}
